<template>
  <div>

    <el-button type="primary" v-an="product-add">测试添加权限按钮</el-button>

    <el-tag v-an="!product-add">（无添加权限）</el-tag>


    <my-list
        ref="list"
        :url='wf_host + "/wf-instance/hiTaskAll?loginName="+this.loginName'
        @param="preload"
        @loaded="procData"
        :page-size="10"
        :store="true"
    >
      <el-table-column prop="processInstanceId" label="实例id" align="center" v-if="show"
      ></el-table-column>
      <el-table-column prop="startName" label="发起人" align="center"
      ></el-table-column>
      <el-table-column prop="assigneeName" label="处理人" align="center"
      ></el-table-column>
      <el-table-column prop="taskName" label="任务名称" align="center"
      ></el-table-column>
      <el-table-column prop="startDate" label="开始时间" align="center"
      ></el-table-column>
      <el-table-column prop="endDate" label="结束时间" align="center"
      ></el-table-column>
      <el-table-column prop="result" label="审批结果" align="center"
      ></el-table-column>

      <el-table-column label="操作" align="center" width="240">
        <template v-slot="scope">
          <el-button type="success" size="small" @click="watchImage(scope.row)">流程图</el-button>
          <el-button type="primary" size="small" @click="activitiDetail(scope.row)">详情</el-button>

          <el-drawer
              title="流程详细信息"
              v-model="hiTableDetail"
              direction="rtl"
              size="50%">
            <el-table :data="gridData">
              <el-table-column property="deployId" label="部署id" ></el-table-column>
              <el-table-column property="processInstanceId" label="实例id" ></el-table-column>
              <el-table-column property="step" label="步骤"></el-table-column>
              <el-table-column property="processInstanceName" label="实例名称"></el-table-column>
              <el-table-column property="createBy" label="姓名"></el-table-column>
              <el-table-column property="createAt" label="日期"></el-table-column>
              <el-table-column property="result" label="审批结果"></el-table-column>
              <el-table-column property="remark" label="审批意见"></el-table-column>
            </el-table>
          </el-drawer>

          <el-dialog
              title="流程图"
              v-model="dialogVisible"
              width="80%"
          >
            <img :src="codeImg"/>
              <template #footer>
                  <span  class="dialog-footer">
                    <el-button @click="dialogVisible = false" type="primary">确 定</el-button>
            </span>
              </template>

          </el-dialog>
        </template>
      </el-table-column>
      <template #query="scope">
        <kv label="任务名称">
          <el-input v-model="scope.query.name"></el-input>
        </kv>
      </template>
    </my-list>

  </div>
</template>

<script setup>




//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({"loginName":"","gridData":[],"hiTableDetail":false,"show":false,"dialogVisible":false});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const preload = function(param) {
    param.pageNo = param.pageNumber;
    param.pageSize = param.take;
    param.query = {
        name: param.name
    };
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function(res) {
    res.data.data.forEach(it => {
//如果是组合实体，设置 it.id=...
        it.roles_res = (it.roles || []).map(it => it.name).join(",")
    });
};
const loadData = function(pageNumber) {
    list.value.loadData(pageNumber);
};
const watchImage = function(row) {
    jv.$http.post($data.wf_host + "/wf-instance/watchimage?processInstanceId="+row.processInstanceId).then(res => {
        $data.dialogVisible = true;
        this.codeImg = 'data:image/png;base64,' + res.data;
    })
};
const activitiDetail = function(row) {
    jv.$http.post($data.wf_host + "/wf-instance/hiActivitiDetail?processInstanceId="+row.processInstanceId).then(res=>{
        $data.gridData=res.data.data;
        $data.hiTableDetail=true
    })
};

onMounted( function() {
    $data.loginName = jv.me.user.loginName
    loadData()
} )



</script>


